<template>
    <div class="top" :style="{backgroundImage:'url('+require('@/assets/image43.png')+')',backgroundSize:'cover',backgroundPosition:'center'}">
        <div class="toptop">
            <svg class="icon" aria-hidden="true" @click="gotoback">
                <use xlink:href="#icon-xiangzuojiantou"></use>
            </svg>
            <span>老年陪诊</span>
        </div>
        <div class="orderbox">
            <div class="orderlist">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouxuan"></use>
                </svg>
                <span>填写订单</span>
            </div>
            <div class="orderlist">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-redyuanyuan"></use>
                </svg>
                <span>在线支付</span>
            </div>
            <div class="orderlist">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-redyuanyuan"></use>
                </svg>
                <span>专人服务</span>
            </div>
            <div class="orderlist">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-redyuanyuan"></use>
                </svg>
                <span>服务完成</span>
            </div>
        </div>
    </div>

    <!-- 表单开始 -->
    <form id="orderForm" @submit.prevent="submitForm">
        <div class="serveinfo">
            <div class="serveitem">
                <span class="important">*</span><span>医院</span>
                <select name="hospital" id="selectitem">
                    <option value="">请选择医院</option>
                    <option value="贵州省人民医院">贵州省人民医院</option>
                    <option value="贵医附院">贵医附院</option>
                    <option value="花溪区人民人医院">花溪区人民人医院</option>
                    <option value="贵州医科大学附属医院">贵州医科大学附属医院</option>
                </select>
            </div>
            <div class="serveitem">
                <span class="important">*</span><span>科室</span>
                <select name="department" id="selectitem">
                    <option value="">请选择科室</option>
                    <option value="内科">内科</option>
                    <option value="儿科">儿科</option>
                    <option value="消化科">消化科</option>
                    <option value="妇产科">妇产科</option>
                </select>
            </div>
            <div class="serveitem">
                <span class="important">*</span><span>床号</span>
                <select name="bedNumber" id="selectitem">
                    <option value="">请选择床号</option>
                    <option value="1号">1号</option>
                    <option value="2号">2号</option>
                    <option value="3号">3号</option>
                </select>
            </div>
            <div class="serveitem">
                <span class="important">*</span><span>就诊人</span>
                <input type="text" class="inputpeople" name="patientName" placeholder="请填写就诊人姓名">
            </div>
            <div class="serveitem">
                <span class="important">*</span><span>联系电话</span>
                <input type="number" class="inputpeople" name="phoneNumber" placeholder="请填写联系电话">
            </div>
            <div class="serveitem">
                <span class="important">*</span><span>服务时段</span>
                <input type="date" class="selectdata" name="serviceDate">
                <input type="time" class="selestime" name="serviceTime">
            </div>
            <div class="serveitem">
                <span class="important">*</span><span>服务天数</span>
                <div class="countday">
                    <button type="button" @click="subtractDay">-</button>
                    <span>{{ message }}</span>
                    <input type="hidden" name="serviceDays" :value="message">
                    <button type="button" @click="addDay">+</button>
                </div>
            </div>
        </div>

        <div class="addserve">
            <div class="serveselect">可选服务:</div>
            <div class="servearea">
                <div class="addserveitem">
                    <input type="checkbox" name="additionalServices" value="老花镜"><span>老花镜</span>
                </div>
                <div class="addserveitem">
                    <input type="checkbox" name="additionalServices" value="助听器"><span>助听器</span>
                </div>
                <div class="addserveitem">
                    <input type="checkbox" name="additionalServices" value="轮椅"><span>轮椅</span>
                </div>
                <div class="addserveitemother">
                    <input type="checkbox" name="additionalServices" value="其他"><span>其他</span>
                    <textarea name="otherRequirements" id="otherserve" cols="20" rows="2" placeholder="请在此填写所需物品，现有条件下会尽量满足您的要求"></textarea>
                </div>
            </div>
        </div>

        <div class="notes">
            <span>备注:</span>
            <textarea name="notes" id="notesserve" cols="30" rows="2" placeholder="如需额外服务，例如接送，如厕，用餐等，请在此备注或提前告知客服"></textarea>
        </div>

        <div class="tips">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-warning"></use>
            </svg>
            <span>额外服务费用客服会与你确认，本订单费用不包括额外服务费用</span>
        </div>

        <div class="selectinfo">
            <input type="checkbox" name="agreement" id="info"  v-model="isChecked">
            <span>我已阅读并同意《金优陪协议和隐私政策》</span>
        </div>

        <div class="footer">
            <div class="footerleft">
                <div class="money">预付金额</div>
                <div class="countmoney">189.00￥</div>
            </div>
            <button type="submit" class="footerright" :disabled="!isChecked" :style="{ backgroundColor: isChecked ? 'rgba(0, 186,173, 100%)' : 'gray' }">立即下单</button>
        </div>
    </form>
    <!-- 表单结束 -->
</template>

<script>
import serialize from 'form-serialize';
import axios from 'axios'

  export default{
    data(){
        return{
            //只有点击了同意按钮button按钮才可以生效
            isChecked: false,
            //默认服务天数
            message: 1,
        };
    },
  
    methods:{
        addDay(){   
           this.message++;

        },
        subtractDay(){
           if(this.message>1){
            this.message--;
           }
        },
        gotoback(){
            this.$router.go(-1)
        },
        gotomyorder(){
            this.$router.push('order')  
        },
       
      
        submitForm() {
            const form = document.querySelector('#orderForm');
            const formData = serialize(form, { hash: true });
            console.log(formData);
            // 可以在这里处理表单数据，发送到服务器
            axios.post('http://localhost:5000/api/auth/submit-order', formData)
            .then(response => {
                console.log('数据提交成功:', response.data);
            })
            .catch(error => {
                console.error('提交错误:', error.response.data);
            });
        }

    }
  }
</script>
<style scoped>
.top{
    position: relative;
    width: 7.88rem;
    height: 5.12rem;
    
}
.toptop{
    padding-top: 50px;
    padding-left: 20px;
}
.toptop span{
    padding-left: 120px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
}
.orderbox{
    margin-top: 100px;
    padding-left: 30px;
    display: flex;
    width: 7.94rem;
    height: 1.54rem;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
}
.orderlist{
   justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
}
.orderlist span{
    margin-top: 15px;
    font-size: 16px;
    color: #fff;
}
.serveinfo{
    margin-top: 5px;
    width: 367px;
    height: 300px;
     box-shadow: 0 0 10px #888;
     margin-left: 30px;
     border-radius: 5px;
}
.serveitem{
    position: relative;
    display: flex;
    /* justify-content: center; */
    align-items: center;
   border-bottom: 1px solid gray;
    width: 367px;
    height: 40px;
   
    /* background-color: aquamarine; */
}
.important{
    color: red;
    margin-left: 10px;
}
#selectitem{
    border: 0;
    position: absolute;
    right: 0;
    width: 200px;
    height: 38px;
  

}
.inputpeople{
    width: 200px;
    height: 38px;
    border: none;
    margin-left: 60px;
}
.selectdata{
    width: 150px;
    height: 38px;
    border: none;
    margin-left: 20px;
}
.selestime{
    width: 100px;
    height: 38px;
    border: none;
}
.countday{
    margin-left: 50px;
}
button{
    width: 30px;
    margin: 10px;
}
.servearea{
    position: relative;
    display: flex;

}
.addserveitem{
  display: flex;
  /* justify-content:space-around; */
  margin-left: 20px;
}
.addserveitemother{
    display: flex;
  align-items: center;
  /* margin-top: 100px; */
  position: absolute;
  margin-left: 20px;
  top: 50px;
  left: 0;
}
.addserveitemother span{
    margin-left: 5px;
}
.serveselect{
    margin-left: 20px;
}
.addserve{
    width: 369px;
    height: 118px;
    box-shadow: 0 0 10px #888;
    margin-top: 20px;
    margin-left: 30px;
    border-radius: 5px;
}
#otherserve{
    margin-left: 30px;
    border: none;
}
.addserveitem span{
    margin-left: 5px;
}
.notes{
    width: 369px;
    height: 66px;
    margin-top: 15px;
    box-shadow: 0 0 10px #888;
    margin-left: 30px;
    border-radius: 5px;
}
.notes span{
    margin-left: 5px;
    font-size: 16px;
    font-weight: bold;
}
#notesserve{
    margin-left: 5px;
    border: none;
}
.tips{
    width:369px ;
   margin-top: 5px;
    margin-left: 30px;
}
.tips span{
    font-size: 12px;
    color:#A6A6A6 ;
}
.selectinfo{
    margin-left: 70px;
    margin-top: 5px;
    font-size: 12px;
    color:#29C1E3 ;
}
#info{
    margin-right: 5px;
    border: 1px solid #29C1E3;
}
.footer{
    display: flex;
}
.money{
    width: 90px;
    height: 35px;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
    border-radius: 20px/20px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-weight: bold;
}
.countmoney{
    color:#00BAAD ;
}
.footerleft{
    margin-top: 5px;
    margin-left: 30px;
}
.footerright{
    margin-top: 15px;
    margin-left: 90px;
    width: 145px;
    height: 44px;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
    border-radius: 30px/30px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
}
</style>